<template>
  <div class="relative mx-[50px] flex">
    <div
      class="swiper-button-prev left-0 hidden h-[40px] w-[40px] translate-x-[-50px] rounded-full bg-[#aaa] text-[#fff] after:text-[16px] after:content-['prev'] hover:bg-[#FF6B01] min780px:flex"
    ></div>
    <Swiper
      class="flex-1"
      :effect="'coverflow'"
      :centeredSlides="true"
      :slidesPerView="'auto'"
      :loop="true"
      :autoplay="{ disableOnInteraction: false }"
      :coverflowEffect="{
        rotate: 45,
        stretch: 0,
        depth: 80,
        modifier: 1,
        slideShadows: true
      }"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }"
      :modules="[EffectCoverflow, Navigation, Autoplay]"
    >
      <SwiperSlide class="w-full min780px:w-[80%]">
        <div
          class="bg-[url('https://swiperjs.com/demos/images/nature-1.jpg')] bg-[length:100%_200px] bg-no-repeat pb-[30px] pl-[20px] pt-[240px] min780px:bg-cover"
        >
          <div class="text-[30px] text-[#031c49] min780px:text-[#fff]">奥特商用车润滑设备解决方案</div>
          <div class="mt-[20px] text-[#031c49] min780px:text-[#fff]">
            齿轮易创帮其润滑监控系统实现了全面线上化，用户可通过常用终端实现远程监控和随时随地设置更改。该线上系统节省人力物力，提高管理效率，降低企业运营成本。
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide class="w-full min780px:w-[80%]">
        <div
          class="bg-[url('https://swiperjs.com/demos/images/nature-2.jpg')] bg-[length:100%_200px] bg-no-repeat pb-[30px] pl-[20px] pt-[240px] min780px:bg-cover"
        >
          <div class="text-[30px] text-[#031c49] min780px:text-[#fff]">奥特商用车润滑设备解决方案</div>
          <div class="mt-[20px] text-[#031c49] min780px:text-[#fff]">
            齿轮易创帮其润滑监控系统实现了全面线上化，用户可通过常用终端实现远程监控和随时随地设置更改。该线上系统节省人力物力，提高管理效率，降低企业运营成本。
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide class="w-full min780px:w-[80%]">
        <div
          class="bg-[url('https://swiperjs.com/demos/images/nature-3.jpg')] bg-[length:100%_200px] bg-no-repeat pb-[30px] pl-[20px] pt-[240px] min780px:bg-cover"
        >
          <div class="text-[30px] text-[#031c49] min780px:text-[#fff]">奥特商用车润滑设备解决方案</div>
          <div class="mt-[20px] text-[#031c49] min780px:text-[#fff]">
            齿轮易创帮其润滑监控系统实现了全面线上化，用户可通过常用终端实现远程监控和随时随地设置更改。该线上系统节省人力物力，提高管理效率，降低企业运营成本。
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide class="w-full min780px:w-[80%]">
        <div
          class="bg-[url('https://swiperjs.com/demos/images/nature-4.jpg')] bg-[length:100%_200px] bg-no-repeat pb-[30px] pl-[20px] pt-[240px] min780px:bg-cover"
        >
          <div class="text-[30px] text-[#031c49] min780px:text-[#fff]">奥特商用车润滑设备解决方案</div>
          <div class="mt-[20px] text-[#031c49] min780px:text-[#fff]">
            齿轮易创帮其润滑监控系统实现了全面线上化，用户可通过常用终端实现远程监控和随时随地设置更改。该线上系统节省人力物力，提高管理效率，降低企业运营成本。
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide class="w-full min780px:w-[80%]">
        <div
          class="bg-[url('https://swiperjs.com/demos/images/nature-5.jpg')] bg-[length:100%_200px] bg-no-repeat pb-[30px] pl-[20px] pt-[240px] min780px:bg-cover"
        >
          <div class="text-[30px] text-[#031c49] min780px:text-[#fff]">奥特商用车润滑设备解决方案</div>
          <div class="mt-[20px] text-[#031c49] min780px:text-[#fff]">
            齿轮易创帮其润滑监控系统实现了全面线上化，用户可通过常用终端实现远程监控和随时随地设置更改。该线上系统节省人力物力，提高管理效率，降低企业运营成本。
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide class="w-full min780px:w-[80%]">
        <div
          class="bg-[url('https://swiperjs.com/demos/images/nature-6.jpg')] bg-[length:100%_200px] bg-no-repeat pb-[30px] pl-[20px] pt-[240px] min780px:bg-cover"
        >
          <div class="text-[30px] text-[#031c49] min780px:text-[#fff]">奥特商用车润滑设备解决方案</div>
          <div class="mt-[20px] text-[#031c49] min780px:text-[#fff]">
            齿轮易创帮其润滑监控系统实现了全面线上化，用户可通过常用终端实现远程监控和随时随地设置更改。该线上系统节省人力物力，提高管理效率，降低企业运营成本。
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
    <div
      class="swiper-button-next right-0 hidden h-[40px] w-[40px] translate-x-[50px] rounded-full bg-[#aaa] text-[#fff] after:text-[16px] after:content-['next'] hover:bg-[#FF6B01] min780px:flex"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { EffectCoverflow, Navigation, Autoplay } from 'swiper'
import 'swiper/css'
import 'swiper/css/effect-coverflow'
import 'swiper/css/navigation'
import 'swiper/css/autoplay'
</script>
